<template>
    <!-- 新增和修改数据 -->
    <el-dialog draggable :fullscreen="fullscreen" v-model="dialogVisible" width="400" :before-close="handleClose">
        <template #header>
            <div class="dialog-title">
                <div class="left">
                    {{ isAdd == true ? '新增' : '修改' }}
                </div>
                <div class="right">
                    <el-icon style="cursor:pointer;" @click="fullscreen = !fullscreen">
                        <CopyDocument v-if="fullscreen == true" />
                        <FullScreen v-else />
                    </el-icon>
                </div>
            </div>
        </template>
        <div>
            <el-form :model="editData" label-width="auto">

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="资料编码">
                            <el-input @input="handleInput" v-model="editData.value" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="资料名称">
                            <el-input v-model="editData.label" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="排序">
                            <el-input-number v-model="editData.sort" :step="1" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注说明">
                            <el-input style="width: 100%;" v-model="editData.rem" :rows="2" type="textarea"
                                placeholder="备注说明" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" plain @click="dialogSuerEv()">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, onActivated } from 'vue'
import { BasicListPost, BasicPkGet, BasicPkPut } from '@/api/setting/basic/index.js'
import {
    FullScreen,
    CopyDocument
} from '@element-plus/icons-vue'

import { loadingStore } from '@/stores/index.js'

const loading = loadingStore()

const emit = defineEmits(['emitGetDataEv'])
const dialogVisible = ref(false)
const isAdd = ref(true)
const editId = ref('')
const fullscreen = ref(false)
const editData = reactive({
    label: '',
    value: '',
    sort: 10,
    rem: ''
})
onMounted(() => {

});
onActivated(() => {

})
const editInit = () => {
    Object.assign(editData, {
        label: '',
        value: '',
        sort: 10,
        rem: ''
    })
}
const handleClose = (done) => {
    editInit()
    done()
}

const handleInput = (value) => {
    const regex = /[^a-zA-Z0-9]/g;
    editData.code = value.replace(regex, "");
}

const dialogSuerEv = () => {
    if (isAdd.value == true) {
        addEv()
    } else {
        console.log('进入修改')
        updateRowEv()
    }
}

// 新增
const addEv = async () => {
    loading.loading = true
    try {

        let arr_data = await BasicListPost(editData)
        if (arr_data.status != 200) {
            return
        }
        ElMessage.success('新增成功')
        // emitGetDataEv(editData.name)
        emit('emitGetDataEv', editData.value)
        editInit()
        dialogVisible.value = false
        isAdd.value = true
    } catch (error) {
        ElMessage.error('新增接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}


// 修改查询单个数据
const updateSelRowEv = async (rowId) => {
    console.log('查询单个数据')
    loading.loading = true
    try {
        let arr_data = await BasicPkGet(rowId)
        if (arr_data.status != 200) {
            return
        }
        editId.value = rowId
        isAdd.value = false
        dialogVisible.value = true
        editData.label = arr_data.data.result.label
        editData.value = arr_data.data.result.value
        editData.sort = arr_data.data.result.sort
        editData.rem = arr_data.data.result.rem
    } catch (error) {
        ElMessage.error('获取单个数据接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 修改数据
const updateRowEv = async () => {
    loading.loading = true
    try {
        let putData = {}
        putData.label = editData.label
        putData.value = editData.value
        putData.sort = editData.sort
        putData.rem = editData.rem
        let arr_data = await BasicPkPut(putData, editId.value)
        if (arr_data.status != 200) {
            return
        }
        ElMessage.success('修改成功')
        emit('emitGetDataEv', editData.value)
        editInit()
        dialogVisible.value = false
        isAdd.value = true
    } catch (error) {
        ElMessage.error('修改接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

defineExpose({
    isAdd,
    dialogVisible,
    editData,
    updateSelRowEv
})

</script>

<style lang='less' scoped>
.dialog-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>